<!--
* @author wn
* @date 2022/11/17 11:21:05
* @description: 图表1
!-->
<template>
	<div ref="bar" style="height: 330px"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { echartsBar, getEchartsDataOne } from '@/network/home'
import { onMounted, ref } from 'vue'

import elementResizeDetectorMaker from 'element-resize-detector'

// 组件实例 传入  echarts init
const bar = ref('')
let myEcharts = null
// 获取数据
getEchartsDataOne().then(result => {
	echartsBar.yAxis.data = result.map(v => v.title)
	echartsBar.series[0].data = result.map(v => v.num)
	myEcharts.setOption(echartsBar)
})
// 监听 页面 大小 改变
/* window.addEventListener('resize', () => {
	myEcharts.resize()
}) */
// 监听  div 的 大小变化
const erd = elementResizeDetectorMaker()
// dom 需要实例化之后才可以
onMounted(() => {
	myEcharts = echarts.init(bar.value)

	erd.listenTo(bar.value, () => {
		myEcharts.resize()
	})
})
</script>
<style scoped lang="scss"></style>
